<template>
  <div class="app-container">
    <el-form class="formList" :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="80px">
      <el-row>
        <el-form-item label="订单号" prop="orderNo">
          <el-input v-model="queryParams.orderNo" placeholder="请输入订单号" clearable size="small"
            @keyup.enter.native="handleQuery" />
        </el-form-item>
        <el-form-item label="客户名称" prop="customerName">
          <el-input v-model="queryParams.customerName" placeholder="请输入客户名称" clearable size="small"
            @keyup.enter.native="handleQuery" />
        </el-form-item>
        <el-form-item label="下单时间" prop="createTimeArray">
          <el-date-picker v-model="queryParams.createTimeArray" type="daterange" align="right" clearable
            value-format="yyyy-MM-dd" unlink-panels range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
            :picker-options="pickerOptions">
          </el-date-picker>
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item label="支付状态" prop="payStatus">
          <el-select v-model="queryParams.payStatus" placeholder="请选择支付状态" clearable size="small">
            <el-option v-for="dict in payStatusOptions" :key="dict.dictValue" :label="dict.dictLabel"
              :value="dict.dictValue" />
          </el-select>
        </el-form-item>
        <el-form-item label="支付方式" prop="payMethod">
          <el-select v-model="queryParams.payMethod" placeholder="请选择支付方式" clearable size="small">
            <el-option v-for="dict in payMethodOptions" :key="dict.dictValue" :label="dict.dictLabel"
              :value="dict.dictValue" />
          </el-select>
        </el-form-item>
        <el-form-item label="支付时间" prop="payTimeArray">
          <el-date-picker v-model="queryParams.payTimeArray" type="daterange" align="right" clearable
            value-format="yyyy-MM-dd" unlink-panels range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
            :picker-options="pickerOptions">
          </el-date-picker>
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item label="订单类型" prop="orderType">
          <el-select v-model="queryParams.orderType" placeholder="请选择订单类型" clearable size="small">
            <el-option v-for="dict in orderTypeOptions" :key="dict.dictValue" :label="dict.dictLabel"
              :value="dict.dictValue" />
          </el-select>
        </el-form-item>
        <el-form-item label="订单状态" prop="orderStatus">
          <el-select v-model="queryParams.orderStatus" placeholder="请选择订单状态" clearable size="small">
            <el-option v-for="dict in orderStatusOptions" :key="dict.dictValue" :label="dict.dictLabel"
              :value="dict.dictValue" />
          </el-select>
        </el-form-item>
        <el-form-item label="发货时间" prop="sendTimeArray">
          <el-date-picker v-model="queryParams.sendTimeArray" type="daterange" align="right" clearable
            value-format="yyyy-MM-dd" unlink-panels range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
            :picker-options="pickerOptions">
          </el-date-picker>
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item label="订单来源" prop="platSource">
          <el-select v-model="queryParams.platSource" placeholder="请选择订单来源" clearable size="small">
            <el-option v-for="dict in platSourceOptions" :key="dict.dictValue" :label="dict.dictLabel"
              :value="dict.dictValue" />
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="开票状态" prop="invoiceStatus">
          <el-select v-model="queryParams.invoiceStatus" placeholder="请选择开票状态" clearable size="small">
            <el-option v-for="dict in invoiceStatusOptions" :key="dict.dictValue" :label="dict.dictLabel"
              :value="dict.dictValue" />
          </el-select>
        </el-form-item>
        <el-form-item label="签收时间" prop="signTimeArray">
          <el-date-picker v-model="queryParams.signTimeArray" type="daterange" align="right" clearable
            value-format="yyyy-MM-dd" unlink-panels range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
            :picker-options="pickerOptions">
          </el-date-picker>
        </el-form-item> -->
        <el-form-item label="配送方式" prop="deliverMethod">
          <el-select v-model="queryParams.deliverMethod" placeholder="请选择配送方式" clearable size="small">
            <el-option v-for="dict in deliverMethodOptions" :key="dict.dictValue" :label="dict.dictLabel"
              :value="dict.dictValue" />
          </el-select>
        </el-form-item>

        <el-form-item label="所属门店" prop="storeId">
          <el-select v-model="queryParams.storeId" placeholder="请选择门店" clearable size="small"
            @keyup.enter.native="handleQuery">
            <el-option v-for="dict in storeInFoOptions" :key="dict.storeId" :label="dict.storeName"
              :value="dict.storeUid" />
          </el-select>
        </el-form-item>

        <el-form-item style="margin-left: 10px">
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
          <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport"
            v-hasPermi="['order:deliver:export']">导出</el-button>
        </el-form-item>
      </el-row>
      <!-- <el-row>

        <el-form-item label="包裹状态" prop="orderPackStatus">
          <el-select v-model="queryParams.orderPackStatus" placeholder="请选择包裹状态" clearable size="small">
            <el-option v-for="dict in orderPackStatusOptions" :key="dict.dictValue" :label="dict.dictLabel"
              :value="dict.dictValue" />
          </el-select>
        </el-form-item>

        <el-form-item label="收货时间" prop="receiveTimeArray">
          <el-date-picker v-model="queryParams.receiveTimeArray" type="daterange" align="right" clearable
            value-format="yyyy-MM-dd" unlink-panels range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
            :picker-options="pickerOptions">
          </el-date-picker>
        </el-form-item>
      </el-row> -->
      <!-- <el-row>
        <el-form-item label="评价状态" prop="commentStatus">
          <el-select v-model="queryParams.commentStatus" placeholder="请选择评价状态" clearable size="small">
            <el-option v-for="dict in commentStatusOptions" :key="dict.dictValue" :label="dict.dictLabel"
              :value="dict.dictValue" />
          </el-select>
        </el-form-item>
        <el-form-item label="评论时间" prop="commentTimeArray">
          <el-date-picker v-model="queryParams.commentTimeArray" type="daterange" align="right" clearable
            value-format="yyyy-MM-dd" unlink-panels range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
            :picker-options="pickerOptions">
          </el-date-picker>
        </el-form-item>
      </el-row> -->
    </el-form>

    <el-row class="row-mbinfo" style="margin-left: 0px; margin-right: 0px;">
      <el-col :span="10">
        <el-button-group>
          <!-- <el-button :class="activeClass == 0 ? 'button-sku-blue':''" @click="handleQueryStatus(0)" size="mini">全部
          </el-button> -->
          <el-button :class="activeClass == 1 ? 'button-sku-blue' : ''" @click="handleQueryStatus(1)" size="mini">
            <svg-icon icon-class="order_unsend" />
            <span style="margin-left: 14%;">待发货</span>
          </el-button>
          <el-button :class="activeClass == 2 ? 'button-sku-blue' : ''" @click="handleQueryStatus(2)" size="mini">
            <svg-icon icon-class="order_send" />
            <span style="margin-left: 14%;">已发货</span>
          </el-button>
          <el-button :class="activeClass == 3 ? 'button-sku-blue' : ''" @click="handleQueryStatus(3)" size="mini">
            <svg-icon icon-class="order_completed" />
            <span style="margin-left: 14%;">已收货</span>
          </el-button>
          <!-- <el-button :class="activeClass == 4 ? 'button-sku-blue':''" @click="handleQueryStatus(4)" size="mini">已关闭
          </el-button> -->
        </el-button-group>
      </el-col>

      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <!-- <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport"
          v-hasPermi="['order:info:export']">导出</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row> -->
    <!-- <div class="divTable">
      <el-table class="el-table" v-loading="loading" v-if="infoList" :data="infoList"
        @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="订单号" align="center" prop="orderNo" width="150" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <el-button size="mini" type="text" @click="handleShowDetail(scope.row)">{{ scope.row.orderNo }}
            </el-button>
          </template>
        </el-table-column>
        <el-table-column label="订单类型" align="center" prop="orderType" :formatter="orderTypeFormat" />
        <el-table-column label="客户名称" align="center" prop="customerName" :show-overflow-tooltip="true" />
        <el-table-column v-if="activeClass == 0 && activeClass == 5" label="订单状态" align="center" prop="orderStatus"
          :formatter="orderStatusFormat" :show-overflow-tooltip="true" />
        <el-table-column v-if="activeClass == 0" label="支付状态" align="center" prop="payStatus"
          :formatter="payStatusFormat" />
        <el-table-column label="支付方式" align="center" prop="payMethod" :formatter="payMethodFormat" />
        <el-table-column label="订单来源" align="center" prop="platSource" :formatter="platSourceFormat" />
        <el-table-column label="订单金额" align="center" prop="orderAmountStr" />
        <el-table-column label="支付金额" align="center" prop="payAmountStr" />
        <el-table-column label="折扣金额" align="center" prop="discountAmountStr" />
        <el-table-column label="代金券金额" align="center" prop="useCouponAmountStr" width="100" />
        <el-table-column label="余额支付" align="center" prop="payByBalanceStr" />
        <el-table-column label="下单时间" align="center" prop="createTime" width="150">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
          </template>
        </el-table-column>
        <el-table-column v-if="activeClass != 1" label="支付时间" align="center" prop="payTime" width="180">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.payTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
          </template>
        </el-table-column>
        <el-table-column v-if="activeClass == 0 || activeClass ==5 " label="取消时间" align="center" prop="cancelTime"
          width="150">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.cancelTime, '{y}-{m}-{d}') }}</span>
          </template>
        </el-table-column>
        <el-table-column v-if="activeClass != 1 && activeClass != 5 " label="开票状态" align="center" prop="invoiceStatus"
          :formatter="invoiceStatusFormat" />
        <el-table-column v-if="activeClass != 1 && activeClass != 5 " label="配送方式" align="center" prop="deliverMethod"
          :formatter="deliverMethodFormat" />
        <el-table-column v-if="activeClass != 1 && activeClass != 2 && activeClass != 5 " label="发货时间" align="center"
          prop="sendTime" width="180">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.sendTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
          </template>
        </el-table-column>
        <el-table-column v-if="activeClass != 1 && activeClass != 2 && activeClass != 5 " label="包裹状态" align="center"
          prop="orderPackStatus" :formatter="orderPackStatusFormat" />
        <el-table-column v-if="activeClass != 1 && activeClass != 2 && activeClass != 5 " label="签收时间" align="center"
          prop="signTime" width="180">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.signTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
          </template>
        </el-table-column>
        <el-table-column v-if="activeClass == 0 || activeClass == 4  " label="收货时间" align="center" prop="receiveTime"
          width="180">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.receiveTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
          </template>
        </el-table-column>
        <el-table-column v-if="activeClass == 0 || activeClass == 3  " label="自动收货时间" align="center"
          prop="autoReceiveTime" width="150">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.autoReceiveTime, '{y}-{m}-{d}') }}</span>
          </template>
        </el-table-column>
        <el-table-column v-if="activeClass == 0 || activeClass == 4 " label="评价状态" align="center" prop="commentStatus"
          :formatter="commentStatusFormat" />
        <el-table-column v-if="activeClass == 0 || activeClass == 4 " label="评价时间" align="center" prop="commentTime"
          width="180">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.commentTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="200">
          <template slot-scope="scope">
            <el-button size="mini" type="text" icon="el-icon-zoom-in" @click="printOrder(scope.row)"
              v-hasPermi="['order:info:query']" v-if="activeClass != 4">打单</el-button>
            <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row,0)"
              v-hasPermi="['order:info:edit']" v-if="activeClass == 1">发货</el-button>
            <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row,1)"
              v-hasPermi="['order:info:edit']" v-if="activeClass == 2 || activeClass == 3">补发</el-button>
            <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row,2)"
              v-hasPermi="['order:info:edit']" v-if="activeClass == 3">换货</el-button>
            <el-button size="mini" type="text" icon="el-icon-delete" @click="revokeOrder(scope.row)"
              v-hasPermi="['order:info:remove']" v-if="activeClass == 2">撤销发货</el-button>
            <el-button size="mini" type="text" icon="el-icon-delete" @click="cancelOrder(scope.row)"
              v-hasPermi="['order:info:remove']" v-if=" activeClass == 2">取消发货</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
        @pagination="getList" />
    </div> -->

    <div class="divTable">
      <div style="width:100%;height:40px;margin-bottom:10px;line-height: 40px; padding: 0 10px;">
        <span
          style="width:36%;display: inline-block;text-align: center;font-size:14px;font-weight: bold;color:#606266;line-height: 20px;">订单详情</span>
        <span
          style="width:8%;display: inline-block;text-align: center;font-size:14px;font-weight: bold;color:#606266;line-height: 20px;">现金支付</span>
        <span
          style="width:6%;display: inline-block;text-align: center;font-size:14px;font-weight: bold;color:#606266;line-height: 20px;">支付方式</span>
        <span
          style="width:8%;display: inline-block;text-align: center;font-size:14px;font-weight: bold;color:#606266;line-height: 20px;">支付状态</span>
        <span
          style="width:6%;display: inline-block;text-align: center;font-size:14px;font-weight: bold;color:#606266;line-height: 20px;">客户名称</span>
        <span
          style="width:10%;display: inline-block;text-align: center;font-size:14px;font-weight: bold;color:#606266;line-height: 20px;">发货状态</span>
        <span
          style="width:8%;display: inline-block;text-align: center;font-size:14px;font-weight: bold;color:#606266;line-height: 20px;">开票状态</span>
        <span
          style="display: inline-block;text-align: center;font-size:14px;font-weight: bold;color:#606266;line-height: 20px;">操作</span>


      </div>
      <div v-for="(item, idx) in infoList" :key="idx" style="margin-bottom:15px;border: 1px solid #E6E6E6;color:#666;">
        <div class="top_order_box">
          <div class="top_order_info">
            <span>订单编号：{{ item.orderNo }}</span>
            <span style="margin-left:30px;">下单时间：{{ item.createTime }}</span>
          </div>
          <div class="top_order_info">
            <span>订单总额：</span>
            <span style="display: block; min-width: 72px; text-align: right;color: #f73131;font-weight: bold">￥{{
              item.orderAmountStr
            }}</span>
          </div>
        </div>
        <div class="item_card_box">
          <div style="width:36%;">
            <div v-for="(i, idx) in item.itemList" :key="idx" class="item_pro_box">
              <div class="item_pro_info">
                <div style="width:50px;height:50px;margin-right: 10px;">
                  <el-image slot="reference" :src="i.imgUrl" :preview-src-list="[i.imgUrl]"
                    style="width:100%;height:100%;border-radius: 4px">
                  </el-image>
                </div>
                <div class="item_pro_info_txt">
                  <div style="width:100%;max-width: 640px;">{{ i.proName }}</div>
                  <div style="line-height: 15px;margin-top: 10px;color: #999">
                    <span style="margin-right:30px;">售价：￥{{ i.priceStr }}</span>
                    <span style="margin-right:30px;">数量：x{{ i.itemNumber }}</span>
                    <span>支付：￥{{ i.itemAmountStr }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div style="width:8%;font-weight: bold;color: #f73131;" class="item_txt_style">
            ￥{{ item.payAmountStr }}
          </div>
          <div style="width:6%;" class="item_txt_style">
            {{ item.payMethodName }}
          </div>
          <div style="width:8%;" class="item_txt_style">
            {{ item.payStatusName }}
          </div>
          <div style="width:6%;" class="item_txt_style">
            <el-popover style="width: 100%" placement="top-start" width="200" trigger="hover">
              <div style="font-size:12px;color:#606266;">
                <div>客户名称：{{ item.customerName }}</div>
                <div style="margin: 5px 0;">联系电话：{{ item.phone }}</div>
                <div>客户留言：{{ item.buyMes }}</div>
              </div>
              <span slot="reference" style="display: flex; align-items: center;cursor: pointer;"
                @click="toJumpCustomer(item.customerUid)">
                <i class="el-icon-user"></i>
                <span style="flex: 1;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;">{{
                  item.customerName }}</span>
              </span>
            </el-popover>

          </div>
          <div style="width:10%;" class="item_txt_style">
            {{ item.sendStatusName }}
            <!-- <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(item,0)"
              v-hasPermi="['order:info:edit']" v-if="activeClass == 1">发货</el-button>
            <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(item,1)"
              v-hasPermi="['order:info:edit']" v-if="activeClass == 2 || activeClass == 3">补发</el-button>
            <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(item,2)"
              v-hasPermi="['order:info:edit']" v-if="activeClass == 3">换货</el-button> -->
          </div>
          <div style="width:8%;" class="item_txt_style">
            {{ item.invoiceStatusName }}
            <el-button size="mini" type="text" icon="el-icon-zoom-in" @click="openInvoice(item)"
              v-hasPermi="['order:info:query']" v-if="item.invoiceUid && item.invoiceStatus == '0'">开票</el-button>
          </div>
          <div style="flex-wrap: wrap;" class="item_txt_style">
            <el-button size="mini" type="text" icon="el-icon-zoom-in" @click="handleShowDetail(item)"
              v-hasPermi="['order:info:query']">查看订单</el-button>
            <el-button size="mini" type="text" icon="el-icon-zoom-in" @click="printOrder(item)"
              v-hasPermi="['order:info:query']">打单</el-button>


            <el-button size="mini" type="text" icon="el-icon-delete" @click="revokeOrder(item)"
              v-hasPermi="['order:info:remove']" v-if="activeClass == 2">撤销发货</el-button>
            <el-button size="mini" type="text" icon="el-icon-delete" @click="cancelOrder(item)"
              v-hasPermi="['order:info:remove']" v-if="activeClass == 2">取消发货</el-button>

            <el-button size="mini" type="text" icon="el-icon-position" @click="handleUpdate(item, 0)"
              v-hasPermi="['order:info:edit']" v-if="activeClass == 1 && item.deliverMethod !== 'ziti'">发货</el-button>
            <el-button size="mini" type="text" icon="el-icon-position" @click="handleUpdateZt(item)"
              v-hasPermi="['order:info:edit']" v-if="activeClass == 1 && item.deliverMethod == 'ziti'">自提</el-button>
            <el-button size="mini" type="text" icon="el-icon-position" @click="handleUpdate(item, 1)"
              v-hasPermi="['order:info:edit']" v-if="activeClass == 2 || activeClass == 3">补发</el-button>
            <el-button size="mini" type="text" icon="el-icon-refresh" @click="handleUpdate(item, 2)"
              v-hasPermi="['order:info:edit']" v-if="activeClass == 3">换货</el-button>
          </div>
        </div>
      </div>

      <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
        @pagination="getList" />
    </div>

    <!-- 发货/补发/换货 -->
    <el-dialog :title="title" :visible.sync="open" width="400px" append-to-body @keyup.enter.native="submitForm">

      <!-- <order v-if="orderVo" :info="orderVo"></order> -->
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">

        <!-- <el-form-item label="发货类型" prop="deliverType">
              <el-select v-model="form.deliverType" placeholder="请选择发货类型" clearable size="small">
                <el-option v-for="dict in deliverTypeList" :key="dict.dictValue" :label="dict.dictLabel"
                  :value="dict.dictValue" />
              </el-select>
            </el-form-item> -->
        <el-row>
          <el-form-item label="用户收货地址" prop="addressUid" v-if="addressList && addressList.length > 0">
            <el-select v-model="form.addressUid" placeholder="请选择收货地址" clearable size="small">
              <el-option v-for="dict in addressList" :key="dict.addressUid" :label="dict.address"
                :value="dict.addressUid" />
            </el-select>
          </el-form-item>
        </el-row>
        <el-row style="margin-top: 20px;">
          <el-form-item label="快递公司" prop="kdUid">
            <el-select v-model="form.kdUid" placeholder="请选择快递公司" clearable size="small">
              <el-option v-for="dict in companyList" :key="dict.kdUid" :label="dict.kdCompany" :value="dict.kdUid" />
            </el-select>
          </el-form-item>
        </el-row>
        <el-row style="margin-top: 20px;">
          <el-form-item label="快递单号" prop="expressNo" clearable>
            <el-input v-model="form.expressNo" placeholder="请输入快递单号" />
          </el-form-item>
        </el-row>
        <el-row style="margin-top: 20px;">
          <el-form-item label="物流费用" prop="freightAmount" clearable>
            <el-input v-model="form.freightAmount" placeholder="请输入物流费用" />
          </el-form-item>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm()">提交</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 查看订单子对话框 -->
    <el-dialog :title="viewTitle" :visible.sync="viewOpen" width="1400px" append-to-body>
      <p>温馨提示： (打印机需自备)</p>
      <p>第一步：打印前需安装云打印服务C-lodop,点击链接
        <a href="http://images.tongkeer.com/K-Print_Setup_for_Win64NT_3.020Extend.rar" target="_blank"
          style="color:blue;">C-lodop</a>
        下载安装并运行程序
      </p>
      <p>第二步：在电脑右下方右键点击C-lodop->扩展功能->AO打印服务->复制Server IP</p>
      <p>第三步：扩展功能->AO客户端桥->勾选本机启动客户端桥,粘贴复制的Server IP地址</p>
      <p>第四步：进入打单界面->点击打单->在弹出的打印界面选择打印->选择连接的打印机名称和打印份数->完成打单</p>
      <br /><br /><br />

      <order v-if="orderVo" :info="orderVo"></order>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="printClick()">打单</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <el-dialog title="开票" :visible.sync="dialogVisible" width="35%">
      <el-form ref="invoice" :model="invoice" :rules="rulesTwo" label-width="100px">
        <el-form-item label="配送方式" prop="deliverMethod">
          <el-select v-model="invoice.deliverMethod" placeholder="请选择配送方式">
            <el-option v-for="dict in deliverMethodOptions" :key="dict.dictValue" :label="dict.dictLabel"
              :value="dict.dictValue"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="发票图片" prop="invoiceUrl">
          <imageArraySize style="margin-left: -40px;" :imageStr.sync="invoice.invoiceUrl" :size="500"
            :key="invoice.invoiceUrl" :msg="'图片要求：宽750px，高563px，大小500KB以内。'" :limit="1" ref="childss">
          </imageArraySize>
        </el-form-item>
        <el-form-item label="发票代码" prop="invoiceNo">
          <el-input v-model="invoice.invoiceNo" placeholder="请输入发票代码" />
        </el-form-item>
        <el-form-item label="发票号码" prop="invoiceCode">
          <el-input v-model="invoice.invoiceCode" placeholder="请输入发票号码" />
        </el-form-item>
        <el-form-item label="开票单位" prop="sellerName">
          <el-input v-model="invoice.sellerName" placeholder="请输入开票单位名称" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addInvoices()">提 交</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>


import {
  listInfo,
  getInfo,
  delInfo,
  updateInfo,
  revokeShip,
  cancelShip,
  getTemplate,
  ziTiOrderInfo
} from "@/api/order/info";

import {
  getKdMpList
} from "@/api/order/kdMp";
import {
  getByIdAddress
} from "@/api/customer/address";

import order from "@/components/Order/order";

import { getLodop } from "@/utils/lodop";

import imageArraySize from "@/components/ImageUpload/imageArraySize";
import {
  selectGroup
} from "@/api/platform/store"
export default {
  name: "Info",
  components: {
    order,
    imageArraySize,
  },
  data () {
    return {
      storeInFoOptions: [],
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      },
      // 默认数字
      activeClass: 1,
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      dialogVisible: false,
      // 总条数
      total: 0,
      // 订单子表格数据
      infoList: [],
      // 弹出层标题
      title: "",
      //查看详细标题
      viewTitle: "",
      // 是否显示弹出层
      open: false,
      //是否显示查看详细弹出层
      viewOpen: false,
      // 订单类型字典
      orderTypeOptions: [],
      // 订单状态字典
      orderStatusOptions: [],
      // 支付状态字典
      payStatusOptions: [],
      // 支付方式字典
      payMethodOptions: [],
      // 订单来源字典
      platSourceOptions: [],
      // 开票状态字典
      invoiceStatusOptions: [],
      // 配送方式字典
      deliverMethodOptions: [],
      // 发货状态字典
      sendStatusOptions: [],
      // 包裹状态字典
      orderPackStatusOptions: [],
      // 评价状态字典
      commentStatusOptions: [],
      //发货类型
      deliverTypeList: [],
      //快递公司配置
      companyList: [],
      //用户收货
      addressList: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        supplierName: null,
        orderType: null,
        orderNo: null,
        parentOrderNo: null,
        customerName: null,
        phone: null,
        orderStatus: null,
        payStatus: null,
        payMethod: null,
        platSource: null,
        payTime: null,
        createTime: null,
        cancelTime: null,
        buyMes: null,
        expireDate: null,
        remark: null,
        invoiceStatus: null,
        deliverMethod: null,
        sendTime: null,
        sendStatus: null,
        orderPackStatus: null,
        signTime: null,
        receiveTime: null,
        commentStatus: null,
        commentTime: null,
        payTimeArray: [],
        createTimeArray: [],
        sendTimeArray: [],
        signTimeArray: [],
        receiveTimeArray: [],
        commentTimeArray: []
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        deliverType: [{
          required: true,
          message: "不能为空",
          trigger: "blur"
        }],
        kdUid: [{
          required: true,
          message: "不能为空",
          trigger: "blur"
        }],
        expressNo: [{
          required: true,
          message: "不能为空",
          trigger: "blur"
        }],
      },
      rulesTwo: {
        invoiceNo: [{
          required: true,
          message: "不能为空",
          trigger: "blur"
        }],
        invoiceCode: [{
          required: true,
          message: "不能为空",
          trigger: "blur"
        }],
        sellerName: [{
          required: true,
          message: "不能为空",
          trigger: "blur"
        }],
        deliverMethod: [{
          required: true,
          message: "不能为空",
          trigger: "blur"
        }],
      },
      orderVo: {},
      //发票参数
      invoice: {},
    };
  },
  created () {
    selectGroup().then(response => {
      this.storeInFoOptions = response.data || [];
    });
    // 默认时间
    let date1 = new Date();
    let date2 = new Date(date1);
    date2.setDate(date1.getDate() - 30);
    let time1 = date1.getFullYear() + "-" + (date1.getMonth() + 1) + "-" + date1.getDate();
    let time2 = date2.getFullYear() + "-" + (date2.getMonth() + 1) + "-" + date2.getDate();
    this.queryParams.createTimeArray.push(time2);
    this.queryParams.createTimeArray.push(time1);
    this.queryParams.payStatus = "1";
    this.queryParams.orderStatus = "1";
    this.queryParams.sendStatus = "0";

    this.getList();
    this.getDicts("order_order_type").then(response => {
      this.orderTypeOptions = response.data;
    });
    this.getDicts("order_order_status").then(response => {
      this.orderStatusOptions = response.data;
    });
    this.getDicts("order_pay_status").then(response => {
      this.payStatusOptions = response.data;
    });
    this.getDicts("order_pay_method").then(response => {
      this.payMethodOptions = response.data;
    });
    this.getDicts("order_plat_source").then(response => {
      this.platSourceOptions = response.data;
    });
    this.getDicts("order_invoice_status").then(response => {
      this.invoiceStatusOptions = response.data;
    });
    this.getDicts("order_deliver_method").then(response => {
      this.deliverMethodOptions = response.data;
    });
    this.getDicts("order_send_status").then(response => {
      this.sendStatusOptions = response.data;
    });
    this.getDicts("order_pack_status").then(response => {
      this.orderPackStatusOptions = response.data;
    });
    this.getDicts("order_comment_status").then(response => {
      this.commentStatusOptions = response.data;
    });
    this.getDicts("order_deliver_type").then(response => {
      this.deliverTypeList = response.data;
    });
  },
  watch: {
    $route (to, from) {
      //from 从哪来
      //to //到哪去
      let path = from.path;
      if ("/order/deliverCenter/" == path) {
        //刷新页面
        this.getList();
      } else {
        let index = path.lastIndexOf("/");
        if (index > -1) {
          path = path.substr(0, index);
          if ("/order/deliverCenter/" == path) {
            //刷新页面
            this.getList();
          }
        }
      }
    }
  },
  methods: {
    toJumpCustomer (uid) {
      this.$router.push("/customer/detail/" + uid);
    },
    /** 点击按钮进行刷新 */
    handleQueryStatus (index) {
      this.activeClass = index;
      if (index == 0) {
        this.queryParams.payStatus = null;
        this.queryParams.orderStatus = "1";
        this.queryParams.sendStatus = null;
      } else if (index == 1) { //待发货
        this.queryParams.payStatus = "1";
        this.queryParams.orderStatus = "1";
        this.queryParams.sendStatus = "0";
      } else if (index == 2) { //已发货
        this.queryParams.payStatus = "1";
        this.queryParams.orderStatus = "1";
        this.queryParams.sendStatus = "1";
      } else if (index == 3) { //已收货
        this.queryParams.payStatus = "1";
        this.queryParams.orderStatus = "1";
        this.queryParams.sendStatus = "2";
      } else { //已关闭
        this.queryParams.payStatus = null;
        this.queryParams.orderStatus = "0,-1,-2";
        this.queryParams.sendStatus = null;
      }
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 查询订单子列表 */
    getList () {
      this.infoList = null;
      this.loading = true;
      listInfo(this.queryParams).then(response => {
        this.infoList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    //获取所有快递公司信息
    getKdMp () {
      this.companyList = null;
      getKdMpList().then(response => {
        this.companyList = response.data;
      })
    },
    //获取用户收货地址
    getAddress (v) {
      this.addressList = null;
      if (v) {
        getByIdAddress(v).then(response => {
          console.log(response)
          this.addressList = response.data;
        })
      }
    },
    // 订单类型字典翻译
    orderTypeFormat (row, column) {
      return this.selectDictLabel(this.orderTypeOptions, row.orderType);
    },
    // 订单状态字典翻译
    orderStatusFormat (row, column) {
      return this.selectDictLabel(this.orderStatusOptions, row.orderStatus);
    },
    // 支付状态字典翻译
    payStatusFormat (row, column) {
      return this.selectDictLabel(this.payStatusOptions, row.payStatus);
    },
    // 支付方式字典翻译
    payMethodFormat (row, column) {
      return this.selectDictLabel(this.payMethodOptions, row.payMethod);
    },
    // 订单来源字典翻译
    platSourceFormat (row, column) {
      return this.selectDictLabel(this.platSourceOptions, row.platSource);
    },
    // 开票状态字典翻译
    invoiceStatusFormat (row, column) {
      return this.selectDictLabel(this.invoiceStatusOptions, row.invoiceStatus);
    },
    // 配送方式字典翻译
    deliverMethodFormat (row, column) {
      return this.selectDictLabel(this.deliverMethodOptions, row.deliverMethod);
    },
    // 发货状态字典翻译
    sendStatusFormat (row, column) {
      return this.selectDictLabel(this.sendStatusOptions, row.sendStatus);
    },
    // 包裹状态字典翻译
    orderPackStatusFormat (row, column) {
      return this.selectDictLabel(this.orderPackStatusOptions, row.orderPackStatus);
    },
    // 评价状态字典翻译
    commentStatusFormat (row, column) {
      return this.selectDictLabel(this.commentStatusOptions, row.commentStatus);
    },
    // 取消按钮
    cancel () {
      this.open = false;
      this.viewOpen = false;
      this.reset();
    },
    // 表单重置
    reset () {
      this.form = {
        orderUid: null,
        platformUid: null,
        supplierUid: null,
        supplierName: null,
        orderType: null,
        orderNo: null,
        parentOrderNo: null,
        customerUid: null,
        customerName: null,
        phone: null,
        orderStatus: null,
        payStatus: null,
        payMethod: null,
        platSource: null,
        orderAmount: null,
        payAmount: null,
        discountRate: null,
        discountAmount: null,
        useCouponUid: null,
        useCouponAmount: null,
        payByBalance: null,
        currencyUnit: null,
        payTime: null,
        createTime: null,
        cancelTime: null,
        buyMes: null,
        expireDate: null,
        remark: null,
        ip: null,
        invoiceUid: null,
        invoiceStatus: null,
        deliverMethod: null,
        sendTime: null,
        sendStatus: null,
        orderPackStatus: null,
        signTime: null,
        receiveTime: null,
        autoReceiveTime: null,
        commentStatus: null,
        commentTime: null,
        deliverType: null,
        kdUid: null,
        expressNo: null,
        freightAmount: 0
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery () {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery () {
      this.resetForm("queryForm");
      this.activeClass = 1;
      this.queryParams.payTimeArray = null;
      this.queryParams.createTimeArray = null;
      this.queryParams.sendTimeArray = null;
      this.queryParams.signTimeArray = null;
      this.queryParams.receiveTimeArray = null;
      this.queryParams.commentTimeArray = null;
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange (selection) {
      this.ids = selection.map(item => item.orderUid)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd () {
      this.reset();
      this.open = true;
      this.title = "添加订单";
    },
    /** 查看详情按钮操作 **/
    handleShowDetail (row) {
      this.orderVo = null;
      const orderUid = row.orderUid;
      this.$router.push("/order/deliverCenter/" + orderUid);
      // getInfo(orderUid).then(response => {
      //   this.orderVo = response.data;
      //   this.viewOpen = true;
      //   this.viewTitle = "订单详情";
      // });

    },
    handCloseDetail () {
      this.viewOpen = false
    },
    //打单
    printOrder (row) {
      this.orderVo = null;
      const orderUid = row.orderUid;
      this.$router.push("/order/deliverCenter/" + orderUid);
      // getInfo(orderUid).then(response => {
      //   this.orderVo = response.data;
      //   this.viewOpen = true;
      //   this.viewTitle = "订单详情";
      // });
    },
    //云打印
    printClick () {
      const orderUid = this.orderVo.orderUid;
      getTemplate(orderUid).then(response => {
        var strHTML = response.msg;
        if (strHTML) {
          // 引用C-Lodop打印服务器,发起打印请求
          var LODOP = getLodop();
          LODOP.ADD_PRINT_HTM(30, 5, "100%", "80%", strHTML);
          LODOP.PREVIEW();
        }
      });
    },

    /** 发货/补发/换货按钮操作 */
    handleUpdate (row, type) {
      this.reset();
      this.orderVo = null;
      const orderUid = row.orderUid || this.ids
      getInfo(orderUid).then(response => {
        this.orderVo = response.data;
        this.form.deliverType = type + "";
        this.form.orderUid = response.data.orderUid;
        this.form.addressUid = response.data.addressUid;
        //仅当换货时，选择用户收货地址，待处理
        if (type && type == 2)
          this.getAddress(this.orderVo.customerUid);
        this.getKdMp();
        this.open = true;
        this.title = "订单发货";
      });
    },
    handleUpdateZt (row) {
      ziTiOrderInfo(row).then(repseon => {
        this.msgSuccess("操作成功");
        this.getList();
      })
    },
    /** 提交按钮 */
    submitForm () {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.orderUid != null) {
            updateInfo(this.form).then(response => {
              this.msgSuccess("操作成功");
              this.open = false;
              this.getList();
            });
          } else {
            this.msgError("缺少订单ID参数")
          }
        }
      });
    },
    //撤销发货
    revokeOrder (row) {
      const orderUid = row.orderUid;
      this.$confirm('是否确认撤销订单编号为"' + row.orderNo + '"的数据项?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(function () {
        return revokeShip(orderUid);
      }).then(() => {
        this.getList();
        this.msgSuccess("撤销发货成功");
      })
    },
    //取消发货
    cancelOrder (row) {
      const orderUid = row.orderUid;
      this.$confirm('是否确认取消订单编号为"' + row.orderNo + '"的数据项?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(function () {
        return cancelShip(orderUid);
      }).then(() => {
        this.getList();
        this.msgSuccess("取消发货成功");
      })
    },
    openInvoice (row) {
      this.invoice = {};
      this.invoice.orderUid = row.orderUid;
      this.dialogVisible = true
    },
    /** 开票 */
    addInvoices () {
      this.$refs.childss.selectImgs();
      addInvoice(this.invoice).then(response => {
        this.getList()
        this.dialogVisible = false
      });
    },
    /** 删除按钮操作 */
    handleDelete (row) {
      const orderUids = row.orderUid || this.ids;
      this.$confirm('是否确认删除订单编号为"' + orderUids + '"的数据项?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(function () {
        return delInfo(orderUids);
      }).then(() => {
        this.getList();
        this.msgSuccess("删除成功");
      })
    },
    /** 导出按钮操作 */
    handleExport () {
      this.download('prod-api/order/info/export', {
        ...this.queryParams
      }, `order_info.xlsx`)
    }
  }
};
</script>

<style lang="scss" scoped>
.top_order_box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 40px;
  background: #F7F8FA;
  padding: 1px 10px;
  line-height: 40px;
  position: relative;

  .top_order_info {
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #333;
  }
}

.item_card_box {
  padding: 10px;
  width: 100%;
  height: auto;
  font-size: 14px;
  display: flex;
  align-content: center;
}

.item_pro_box {
  width: 100%;
  height: 80px;

  &:not(:last-child) {
    margin-bottom: 10px;
  }

  .item_pro_info {
    display: flex;
    align-items: center;

    .item_pro_info_txt {
      padding: 5px 0;
      flex: 1;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      min-height: 70px;
    }
  }
}

.item_txt_style {
  display: flex;
  align-items: center;
  justify-content: center;
}

.divTable {
  padding: 10px;
  background: #fff;
  width: 100%;
  height: 100%;
  border-radius: 6px;
}

.el-table {
  /* border-radius: 6px; */
  width: 100%;
  background-color: #fff;
  /* padding: 10px; */
}

.pagination-container {
  position: relative;
  top: -15px;
  height: 20px;
  padding: 10px 10px 20px 10px;
}

.app-container {
  background-color: #F7F8FA;
  padding: 20px;
}

.el-form {
  background-color: #fff;
  padding-top: 10px;
  border-radius: 6px;
}

.row-mb2 {
  border-radius: 6px;
  width: 100%;
  background-color: #fff;
  padding: 10px;
  margin: 10px 0;
}

.el-form-item {
  margin-bottom: 10px;
}

.button-sku-blue {
  color: #409eff;
  background: #ecf5ff;
  border-color: #b3d8ff;
}
</style>
